<template>
    <div class="filter-container" v-for="(item, index) in filter_list" :key="index">
        <div class="filter-item" @click="chooseFilter(index as number)">{{ item.label }} ({{ item.count }})</div>
    </div>
</template>

<script setup lang='ts'>

const emit = defineEmits(['chooseFilter'])

const props = defineProps([
    'filter_list'
])

const chooseFilter = ((index: number) => {
    emit('chooseFilter', index)
})

</script>

<style scoped>
.filter-container {
    margin-left: -10px;
    background-color: #fff;
}

.filter-item {
    font-family: Merriweather Sans, sans-serif;
    padding: 13px 15px;
    border-bottom: solid #dcdcdc 0.25px;
}
</style>